<template>
  <view @click.stop="maskClick" class="awsc-popup">
    <view id="nc" />
  </view>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";

const props = defineProps({
  scene: {
    type: String,
    require: true
  },
  appkey: {
    type: String,
    require: true
  }
});

const emit = defineEmits(["success", "click"]);

let ncModule: any;
onMounted(() => {
  // #ifdef H5
  window.AWSC?.use("nc", (state: any, module: any) => {
    // 初始化
    ncModule = module.init({
      // 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
      appkey: props.appkey,
      //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
      scene: props.scene,
      // 声明滑动验证需要渲染的目标ID。
      renderTo: "nc",
      //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
      success(data: any) {
        emit("success", data);
        ncModule.reset();
      },
      // 滑动验证失败时触发该回调参数。
      fail(failCode: any) { },
      // 验证码加载出现异常时触发该回调参数。
      error(errorCode: any) {
        uni.showToast({ title: "滑动验证码加载异常", icon: "none" });
      }
    });
    ncModule.reset();
  });
  // #endif
});

const maskClick = () => {
  emit("click")
}

</script>

<style lang="scss" scoped>
// scss
.awsc-popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9;

  #nc {
    width: 300px;
    top: 50%;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%) scale(1);
    border-radius: 52rpx !important;
    overflow: hidden;
    transition: all 0.2s;
  }
}


::v-deep {

  #nc,
  .nc_wrapper,
  .nc_scale,
  .nc-lang-cnt {

    // width: 100% !important;
    height: 80rpx !important;
    line-height: 80rpx !important;
  }

  .nc-lang-cnt {
    margin-right: 6px !important;
  }

  .btn_slide,
  .scale_text {
    line-height: 80rpx !important;
  }

  .nc_iconfont {
    height: 96% !important;
  }

}
</style>